<template>
  <div>
    <div>
      <van-nav-bar
          class="title"
          title="评论"
          left-text="返回"
          left-arrow
          @click-left="back()"
      />
    </div>
    <div v-for="c in comments">
      <van-row gutter="20">
        <van-col span="4">
          <van-image
              round
              width="5rem"
              height="5rem"
              :src="c.headportrait"
              class="img1"
          />
        </van-col>
        <van-col span="20">
          <div class="dv1">{{ c.name }}</div>
          <div class="dv2">{{ c.evaluate }}</div>
          <div class="dv3">{{ c.timeinfo }}</div>
        </van-col>
      </van-row>
    </div>

    <div class="dv4">
      <van-cell-group inset>
        <van-field
            v-model="comment.evaluate"
            center
            :label="str1"
            label-width="2rem"
            clearable
            placeholder="请输入评论内容"
        >
          <template #button>
            <van-button size="small" type="primary" @click="send()">发表</van-button>
          </template>
        </van-field>
      </van-cell-group>

    </div>
  </div>
</template>

<script>
export default {
  name: "AdvCommitView",
  data() {
    return {
      str1: "评论",
      comment: {
        aid:0,
        evaluate:"",
        uid:0,
      },
      comments: [{
        evaluate: "",
        timeinfo: "",
        name: "",
        headportrait: ""

      }]
    }
  },
  methods: {
    back() {
      history.back();
    }, selectall() {
      this.axios.get("/api/evalution/query.do?aid="+this.$store.state.orderapply.id).then(r => {
        if (r.data.code == 200) {
          this.comments = r.data.data;

        }
      })
    },send(){
      this.axios.post("api/evalution/add.do",this.comment).then(r=>{
        if (r.data.code == 200) {
          this.selectall();
        }
        else{
          alert("发送失败")
        }
      })
    }
  }, mounted() {

    this.selectall(),
        this.comment.uid=this.$store.state.token,
        this.comment.aid=this.$store.state.orderapply.id



  }
}
</script>

<style scoped>
.img1 {
  margin-top: 5px;
  margin-left: 5px;
}

.dv1 {
  text-align: left;
  margin-left: 25px;
  font-size: 15px;
  color: dodgerblue;
  font-weight: bolder;
}

.dv2 {
  text-align: left;
  margin-left: 25px;
  font-size: 15px;
  margin-top: 5px;
}

.dv3 {
  text-align: left;
  margin-left: 25px;
  margin-top: 5px;
  font-size: 10px;
  color: darkgray;
  bottom: auto;
}

.dv4 {
  position: fixed;
  bottom: 0;
}
.title{
  position: fixed;
  width: 100%;
}
</style>